<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jun
 * @Date: 2021-05-24 14:59:41
 * @LastEditors: Jun
 * @LastEditTime: 2021-06-10 14:59:39
-->
<template>
  <div class="navBar">
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      router
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/signUpList">我的报名</el-menu-item>
      <el-menu-item index="/user">我的信息</el-menu-item>

      <div class="user">
        <el-dropdown>
          <span class="el-dropdown-link">
            用户名<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-avatar class="avatar" shape="square" :src="userInfo.icon"></el-avatar>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("userInfo");

export default {
  data() {
    return {
      activeIndex: "/home",
    };
  },
  computed:{
    ...mapState(["userInfo"])
  },
  methods: {
    logout() {
      localStorage.clear()
      this.$router.replace("/")
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.activeIndex = val.path
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "style/views/navBar.scss";
</style>